<template>
  <div>
    <el-form label-width="100px">
      <el-form-item label="贷后人员：" prop="company">
        <el-select
          v-model="employeeId"
          clearable
          placeholder="请选择"
        >
          <el-option
            v-for="item in rollCall"
            :key="item.id"
            :label="item.value"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <p class="tips">你确定要将已选中订单转移到其贷后人员名下跟进吗？</p>
    <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitButton">确 定</el-button>
      </span>
    <div v-if="type">
      <div class="zy-title">转移记录</div>
      <el-table
        :data="recordList"
        border
        style="width: 100%"  header-row-class-name="header-class">
        <el-table-column
          type="index"
          label="序号" width="100px">
        </el-table-column>
        <el-table-column
          prop="loanOfficerName"
          label="转移贷后人员"
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="转移日期" >
        </el-table-column>
      </el-table>
      <!--    分页-->
      <div class="pagination">
        <el-pagination
          background
          small
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </div>


  </div>
</template>

<script>
import { findEmployeeByRole, compensatoryChange, getFindRecords } from "../../assets/js/api";

export default {
  name: "transfer",
  data() {
    return {
      rollCall: [],
      employeeId: "",
      ids: "",
      recordList: [],
      pageNum: 1,
      pageSize: 4,
      total:0,

    };
  },
  props: ["orderNumbers", "type"],
  mounted() {
    this.getFindEmployeeByRole();
    if (this.type) {
      this.getTransferRecord();
    }
  },
  methods: {
    //分页
    currentChange(cpage){
      this.pageNum=cpage;
      this.getTransferRecord();
    },
    //查询转移记录
    getTransferRecord() {
      getFindRecords({
        orderNumber: this.orderNumbers,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.recordList = res.data.records;
        this.total=res.data.total;

      });
    },
    //确定
    submitButton() {
      if (typeof this.orderNumbers != "object") {
        this.ids = [this.orderNumbers];
      } else {
        this.ids = this.orderNumbers;
      }
      compensatoryChange({
        "employeeId": this.employeeId,
        "orderNumbers": this.ids
      }).then(() => {
        this.closeFun(true);
        this.$emit("dialogCloes");
        this.$emit("refresh");
        this.$message.success("转移成功");
        if (this.type) {
          this.getTransferRecord();
        }
      });
    },
    //取消
    cancel() {
      this.$emit("dialogCloes");
      this.closeFun(true);
    },
    //清空
    closeFun(data) {
      if (data == true) {
        this.employeeId = "";
      }
    },
    //获取贷后人员
    getFindEmployeeByRole() {
      findEmployeeByRole({ roleId: 18 }).then(res => {
        this.rollCall = res.data;
      });

    }
  }
};
</script>

<style scoped type="less">
/deep/ .el-form-item__content {
  width: 210px;
  margin-left: 0px !important;
}

/deep/ .el-form-item {
  margin-bottom: 37px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tips {
  margin-bottom: 37px;
  font-size: 14px;
  font-weight: 400;
  color: #333333;
}
.zy-title{
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  margin: 28px 0 20px;
  text-align: left;
}
/deep/ .header-class th{
  font-size: 14px;
  font-weight: bold;
  color: #333333;
}
.pagination {
  margin-top: 10px;
  text-align: right;
  height: auto;
}
</style>